<template>
  <div class="control-view" v-show="isshow">
    <span>lon:{{ lon }}</span>
    <span>lat:{{ lat }}</span>
  </div>
</template>

<script setup>
import { ref, onMounted, watch, toRaw } from 'vue'
import { useLineData } from '@/store'
import { useRouter } from 'vue-router'
import CesiumNavigation from 'cesium-navigation-es6'
const lineStore = useLineData()
let viewer
let lon = ref(null)
let lat = ref(null)
const isshow = ref(true)
let cesiumNavigation

onMounted(() => {
  viewer = lineStore.viewer
  //fps开启 cesium 送的 打开即用
  viewer.scene.debugShowFramesPerSecond = true
  //外部加载的库
  cesiumNavigation = new CesiumNavigation(viewer, {
    enableCompass: isshow.value, //指南针
    enableZoomControls: isshow.value, //是否启用缩放控件
    enableDistanceLegend: isshow.value, //比例尺
    defaultResetView: Cesium.Cartesian3.fromDegrees(113.95, 30.19, 34000),
  })

  //指北针
  const elements = document.getElementsByClassName('compass')
  for (let i = 0; i < elements.length; i++) {
    const element = elements[i]
    // 设置位置偏移
    // 确保元素是绝对定位的,
    element.style.position = 'absolute'
    // 设置顶部偏移
    element.style.top = '2.2%'
    // 设置左侧偏移
    element.style.left = '8%'
    // 设置缩放比例
    element.style.scale = '0.8'
  }

  //比例尺
  const distanceLegends = document.getElementsByClassName('distance-legend')
  for (let i = 0; i < distanceLegends.length; i++) {
    const distanceLegend = distanceLegends[i]
    // 设置位置偏移
    distanceLegend.style.position = 'absolute'
    distanceLegend.style.top = '5%'
    distanceLegend.style.right = '17%'
  }

  //加减控件
  const scaleLabels = document.getElementsByClassName('navigation-controls')
  for (let i = 0; i < scaleLabels.length; i++) {
    const scaleLabel = scaleLabels[i]
    scaleLabel.style.position = 'absolute'
    scaleLabel.style.top = '3%'
    scaleLabel.style.left = '3%'
  }
})

// 获取当前地图中心的经纬度
function getCenterPosition(viewer) {
  let centerResult = viewer.camera.pickEllipsoid(
    new Cesium.Cartesian2(
      viewer.canvas.clientWidth / 2,
      viewer.canvas.clientHeight / 2
    )
  )
  let curPosition = Cesium.Ellipsoid.WGS84.cartesianToCartographic(centerResult)
  let curLongitude = (curPosition.longitude * 180) / Math.PI
  let curLatitude = (curPosition.latitude * 180) / Math.PI
  return {
    lon: curLongitude,
    lat: curLatitude,
  }
}

// 使用requestAnimationFrame实现实时调用获取坐标的函数
function updatePosition() {
  let centerPosition = getCenterPosition(viewer)
  lon.value = centerPosition.lon.toFixed(2)
  lat.value = centerPosition.lat.toFixed(2)
  requestAnimationFrame(updatePosition)
}

// 启动实时更新
requestAnimationFrame(updatePosition)

// 监听路由变化，控制显示隐藏指南针
const router = useRouter()
const routeName = toRaw(router).currentRoute.value.fullPath.split('/')[1]

watch(
  () => toRaw(router).currentRoute.value.fullPath.split('/')[1],
  (value) => {
    isshow.value = value === 'siteManagement' ? false : true
  },
  { immediate: true }
)

// 监听 isshow 的变化，动态更新 cesiumNavigation 的显示状态
watch(
  () => isshow.value,
  (value) => {
    const elements = document.getElementsByClassName('compass')
    for (let i = 0; i < elements.length; i++) {
      elements[i].style.display = value ? 'block' : 'none'
    }

    const distanceLegends = document.getElementsByClassName('distance-legend')
    for (let i = 0; i < distanceLegends.length; i++) {
      distanceLegends[i].style.display = value ? 'block' : 'none'
    }

    const scaleLabels = document.getElementsByClassName('navigation-controls')
    for (let i = 0; i < scaleLabels.length; i++) {
      scaleLabels[i].style.display = value ? 'block' : 'none'
    }
  },
  { immediate: true }
)
</script>

<style scoped>
.control-view {
  display: flex;
  position: absolute;
  top: 5%;
  right: 6.5%;
  height: 40px;
  width: 200px;
  justify-content: space-evenly;
  align-items: center;
  font-size: 16px;
  color: #ffffff;
  /* background-color: #7fa6bf; */
  opacity: 0.8;
  z-index: 201;
}
</style>
